/* ===== SYMBIOSYS — Tabs fond auto (1 ou 2 lignes) ===== */
/* Scope strict à la page Nos produits */
body[data-action="Page-Show"][data-querystring*="cid=nos-produits"] #nos-produits
.tab__component-inner > ul.nav.nav-tabs[role="tablist"] {
  /* layout */
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 10px 16px !important;
  padding: 14px 18px !important;
  margin: 12px auto 10px !important;

  /* sécurité contre styles du thème */
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;  /* on gère le fond via ::after */
  position: relative !important;
  border-radius: 16px !important;
  overflow: visible !important;
  z-index: 0;
}

/* → Vrai fond qui suit la hauteur du UL (1 ou 2 lignes) */
body[data-action="Page-Show"][data-querystring*="cid=nos-produits"] #nos-produits
.tab__component-inner > ul.nav.nav-tabs[role="tablist"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;                 /* occupe 100% du UL, hauteur auto */
  border-radius: inherit !important;
  background: #EEF1F5 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03) inset !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 🔧 Coupe le pseudo-fond du thème s’il existe (avant/après) */
body[data-action="Page-Show"][data-querystring*="cid=nos-produits"] #nos-produits
.tab__component-inner > ul.nav.nav-tabs[role="tablist"]::before {
  content: none !important;
}

/* Les liens passent au-dessus du fond */
body[data-action="Page-Show"][data-querystring*="cid=nos-produits"] #nos-produits
.tab__component-inner > ul.nav.nav-tabs[role="tablist"] > li.nav-item > .nav-link {
  position: relative !important;
  z-index: 1 !important;

  /* on neutralise nav-fill */
  width: auto !important;
}

/* Empêche .nav-fill d’étirer les li */
body[data-action="Page-Show"][data-querystring*="cid=nos-produits"] #nos-produits
.tab__component-inner > ul.nav-tabs.nav-fill > li.nav-item {
  flex: 0 0 auto !important;
}

/* (Optionnel) compacte la ligne “Compléments alimentaires” */
body[data-action="Page-Show"][data-querystring*="cid=nos-produits"] #nos-produits
.tab__component-inner .tab-pane-inner .tab-pane-descriptions {
  margin-top: 6px !important;
}